<template>
  <view class="uni-search-bar">
    <view class="uni-search-box">
      <view class="iconfont icon-search"></view>
      <input class="input" :placeholder="placeholder" v-model="searchVal" @confirm="confirm" confirm-type="search"/>
      <view v-if="iconEmpty" class="iconfont icon-close-circle-filled" @click="emptyVal"></view>
    </view>
    <view class="close">
      <text class="close-text" @click="cancel">取消</text>
    </view>
  </view>
</template>

<script setup>
  import {ref, watch} from 'vue'
  const inputValue = ref("")
  const searchVal = ref("")
  const iconEmpty = ref(false)
  const emit = defineEmits(['input', 'confirm','close'])
  const props = defineProps({
    placeholder:{
      type: String,
      default: '请输入搜索关键词'
    }
  })
  watch(() => searchVal.value, () => {
    emit('input', searchVal.value)
    if(searchVal.value.length > 0) {
      iconEmpty.value = true
    } else {
      iconEmpty.value = false
    }
  })
  // 但点击手机键盘完成时触发
  const confirm = (event) => {
    emit('confirm',searchVal.value)
  }
  // 点击取消触发
  const cancel = () => {
    emit('close', searchVal.value)
  }
  
  // 点击清空图标时触发
  const emptyVal = () => {
    searchVal.value = ""
  }
</script>
<style lang="scss">
  .uni-search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    background-color: #67de75;
    padding: 0 30rpx;
    box-sizing: border-box;
    .uni-search-box {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      // width: 90%;
      height: 64rpx;
      background-color: #fff;
      border-radius: 15px;
      .input {
        margin: 0 14rpx;
      }
      .icon-search {
        font-size: 40rpx;
        color: #898989;
        margin-left: 20rpx;
      }
      .icon-close-circle-filled {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 40rpx;
        color: #898989;
        margin-right: 20rpx;
      }
    }
    .close {
      height: 100%;
      line-height: 100rpx;
      margin-left: 10rpx;
      .close-text {
        font-size: 38rpx;
        font-weight: 500;
        color: #fff;
      }
    }
  }
</style>